<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<link rel="shortcut icon" href="asset/example/favicon.ico" />
<title>商品管理</title>
<link href="asset/themes/insdep/easyui.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">
<link href="asset/themes/insdep/icon.css" rel="stylesheet" type="text/css">
<link href="asset/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="asset/jquery.min.js"></script>
<script type="text/javascript" src="asset/jquery.easyui.min.js"></script>
<script type="text/javascript" src="asset/themes/insdep/jquery.insdep-extend.min.js"></script>
<style type="text/css">
.layout-panel-west {
	border-right: 1px solid #c5c5c5;
}
</style>
</head>
<body>
	<table id="product_datagrid" style="height: 500px;">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th data-options="title:'编号',field:'id',width:80"></th>
				<th data-options="field:'name',width:100">名称</th>
				<th data-options="field:'button',width:80,align:'center',formatter:button">操作</th>
			</tr>
		</thead>
	</table>
	<div id="product_toolbar" style="padding:2px 5px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" id="product_save_btn">新增</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" id="product_delete_btn">删除选中</a>
		<span class="datagrid-btn-separator" style="vertical-align: middle; height: 25px;display:inline-block;float:none"></span>
        Date From: <input class="easyui-datebox" style="width:110px">
        To: <input class="easyui-datebox" style="width:110px">
        Language: 
        <select class="easyui-combobox" panelHeight="auto" style="width:100px">
            <option value="java">Java</option>
            <option value="c">C</option>
            <option value="basic">Basic</option>
            <option value="perl">Perl</option>
            <option value="python">Python</option>
        </select>
        <a href="#" class="easyui-linkbutton" iconCls="icon-search" id="product_search_btn">搜索</a>
    </div>
    <div id="product_save_dlg" class="easyui-dialog" title="新增" data-options="iconCls:'icon-add',cls:'dialog',modal:true,closed:true,buttons:'#product_save_buttons'" style="width:400px;height:200px;padding:10px">
        The dialog content.
    </div>
    <div id="product_save_buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton button-default" id="product_save_confirm">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" id="product_save_cancel">取消</a>
    </div>
	<script>
		$(function() {
			function button(value, row, index) {
				return "<a href='#' data-id='"+row.id+"' class='button-edit'>编辑</a> <a href='#' data-id='"+row.id+"' class='button-delete'>删除</a>";
			}
			
			$("#product_save_btn").click(function(){
				$("#product_save_dlg").dialog("open");
			});
			
			$('#product_datagrid').datagrid({
				cls : "theme-datagrid",
				pagination : true,
				fitColumns : true,
				fit:true,
				toolbar: "#product_toolbar",
				url : '/demo_easyui/product/datagrid',
				onLoadSuccess : function() {
					$('.button-delete').linkbutton({
						iconCls : 'icon-remove'
					}).click(function() {
						alert($(this).data("id"));
					});
					$('.button-edit').linkbutton({
						iconCls : 'icon-edit'
					});
				}
			});
		});
	</script>
</body>
</html>